home *** CD-ROM | disk | FTP | other *** search
/ InterCD 2001 November / november_2001.iso / Browsers / Netscape 6.1 / browser.xpi / bin / chrome / modern.jar / skin / modern / global / button.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2001-07-05  |  12.9 KB  |  416 lines
  1. /*
  2.  * The contents of this file are subject to the Netscape Public
  3.  * License Version 1.1 (the "License"); you may not use this file
  4.  * except in compliance with the License. You may obtain a copy of
  5.  * the License at http://www.mozilla.org/NPL/
  6.  *
  7.  * Software distributed under the License is distributed on an "AS
  8.  * IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
  9.  * implied. See the License for the specific language governing
  10.  * rights and limitations under the License.
  11.  *
  12.  * The Original Code is Mozilla Communicator client code, released
  13.  * March 31, 1998.
  14.  *
  15.  * The Initial Developer of the Original Code is Netscape
  16.  * Communications Corporation. Portions created by Netscape are
  17.  * Copyright (C) 1998-1999 Netscape Communications Corporation. All
  18.  * Rights Reserved.
  19.  *
  20.  * Contributor(s):
  21.  *   Joe Hewitt (hewitt@netscape.com)
  22.  */
  23.  
  24. /* ===== button.css =====================================================
  25.   == Styles used by the XUL button element.
  26.   ======================================================================= */
  27.  
  28. @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  29.  
  30. /* ::::: nine slice button :::::::::::::::::::::::::::::::::::::::::::::::::
  31.    :: This is the default style used for all buttons. This style is fully
  32.    :: scalable in 2 dimensions.  It supports normal and default buttons in
  33.    :: both active and disabled states, which includes 6 sets of sliced
  34.    :: images.
  35.    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
  36.  
  37. button {
  38.   -moz-user-focus: normal;
  39.   margin: 3px;
  40.   border: 2px solid transparent;
  41.   min-width: 6em;
  42.   color: #000000;
  43.   font: menu;
  44. }
  45.  
  46. .button-text-box {
  47.   padding: 3px 2px 3px 2px;
  48.   text-align: center;
  49.   vertical-align: middle;
  50. }
  51.  
  52. .button-text-mid,
  53. .button-icon-mid {
  54.   margin-right: 3px;
  55. }
  56.  
  57.   /* .......... focused state .......... */
  58.  
  59. button:focus {
  60.   border-color: #98A5B2;
  61.   -moz-border-radius: 6px;
  62. }
  63.     
  64. button[default]:focus {
  65.   -moz-border-radius: 8px;
  66. }
  67.  
  68.   /* .......... normal state .......... */
  69.   
  70. .button-box-left {
  71.   width: 6px;
  72. }
  73.     
  74. .button-left-top {
  75.   background: url("chrome://global/skin/button/btn-lft-top.gif") no-repeat;
  76.   height: 9px;
  77. }
  78.  
  79. .button-left-mid {
  80.   background: url("chrome://global/skin/button/btn-lft-mid.gif") repeat-y;
  81. }
  82.  
  83. .button-left-btm {
  84.   background: url("chrome://global/skin/button/btn-lft-btm.gif") no-repeat;
  85.   height: 8px;
  86. }
  87.  
  88. .button-box-mid {
  89.   background-color: #A7B5C2;
  90. }
  91.   
  92. .button-mid-top {
  93.   background: url("chrome://global/skin/button/btn-mid-top.gif") repeat-x;
  94.   height: 9px;
  95. }
  96.  
  97. .button-mid-btm {
  98.   background: url("chrome://global/skin/button/btn-mid-btm.gif") repeat-x;
  99.   height: 8px;
  100. }
  101.  
  102. .button-box-right {
  103.   width: 6px;
  104. }
  105.   
  106. .button-right-top {
  107.   background: url("chrome://global/skin/button/btn-rit-top.gif") no-repeat;
  108.   height: 9px;
  109. }
  110.  
  111. .button-right-mid {
  112.   background: url("chrome://global/skin/button/btn-rit-mid.gif") repeat-y;
  113. }
  114.  
  115. .button-right-btm {
  116.   background: url("chrome://global/skin/button/btn-rit-btm.gif") no-repeat;
  117.   height: 8px;
  118. }
  119.   
  120. /* .......... active/open state .......... */
  121.  
  122. button:hover:active,
  123. button[open="true"] {
  124.   color: #FFFFFF;
  125. }
  126.   
  127. button:hover:active > .button-box-left > .button-left-top,
  128. button[open="true"] > .button-box-left > .button-left-top {
  129.   background-image: url("chrome://global/skin/button/btn-act-lft-top.gif");
  130. }
  131.  
  132. button:hover:active > .button-box-left > .button-left-mid,
  133. button[open="true"] > .button-box-left > .button-left-mid {
  134.   background-image: url("chrome://global/skin/button/btn-act-lft-mid.gif");
  135. }
  136.  
  137. button:hover:active > .button-box-left > .button-left-btm,
  138. button[open="true"] > .button-box-left > .button-left-btm {
  139.   background-image: url("chrome://global/skin/button/btn-act-lft-btm.gif");
  140. }
  141.  
  142. button:hover:active > .button-stack > .button-box-mid,
  143. button[open="true"] > .button-stack > .button-box-mid {
  144.   background-color: #90A1B3;
  145. }
  146.   
  147. button:hover:active > .button-stack > .button-box-mid > .button-mid-top,
  148. button[open="true"] > .button-stack > .button-box-mid > .button-mid-top {
  149.   background-image: url("chrome://global/skin/button/btn-act-mid-top.gif");
  150. }
  151.  
  152. button:hover:active > .button-stack > .button-box-mid > .button-mid-btm,
  153. button[open="true"] > .button-stack > .button-box-mid > .button-mid-btm {
  154.   background-image: url("chrome://global/skin/button/btn-act-mid-btm.gif");
  155. }
  156.  
  157. button:hover:active > .button-box-right > .button-right-top,
  158. button[open="true"] > .button-box-right > .button-right-top {
  159.   background-image: url("chrome://global/skin/button/btn-act-rit-top.gif");
  160. }
  161.  
  162. button:hover:active > .button-box-right > .button-right-mid,
  163. button[open="true"] > .button-box-right > .button-right-mid {
  164.   background-image: url("chrome://global/skin/button/btn-act-rit-mid.gif");
  165. }
  166.  
  167. button:hover:active > .button-box-right > .button-right-btm,
  168. button[open="true"] > .button-box-right > .button-right-btm {
  169.   background-image: url("chrome://global/skin/button/btn-act-rit-btm.gif");
  170. }
  171.  
  172. /* .......... disabled state .......... */
  173.  
  174. button[disabled="true"],
  175. button[disabled="true"]:hover:active {
  176.   color: #8C99AB;
  177. }
  178.  
  179. button:hover:active > .button-box-left > .button-left-top[disabled="true"],
  180. .button-left-top[disabled="true"] {
  181.   background-image: url("chrome://global/skin/button/btn-dis-lft-top.gif");
  182. }
  183.  
  184. button:hover:active > .button-box-left > .button-left-mid[disabled="true"],
  185. .button-left-mid[disabled="true"] {
  186.   background-image: url("chrome://global/skin/button/btn-dis-lft-mid.gif");
  187. }
  188.  
  189. button:hover:active > .button-box-left > .button-left-btm[disabled="true"],
  190. .button-left-btm[disabled="true"] {
  191.   background-image: url("chrome://global/skin/button/btn-dis-lft-btm.gif");
  192. }
  193.  
  194. button:hover:active > .button-stack > .button-box-mid[disabled="true"],
  195. .button-box-mid[disabled="true"] {
  196.   background-color: #B7BFCB;
  197. }
  198.   
  199. button:hover:active > .button-stack > .button-box-mid > .button-mid-top[disabled="true"],
  200. .button-mid-top[disabled="true"] {
  201.   background-image: url("chrome://global/skin/button/btn-dis-mid-top.gif");
  202. }
  203.  
  204. button:hover:active > .button-stack > .button-box-mid > .button-mid-btm[disabled="true"],
  205. .button-mid-btm[disabled="true"] {
  206.   background-image: url("chrome://global/skin/button/btn-dis-mid-btm.gif");
  207. }
  208.  
  209. button:hover:active > .button-box-right > .button-right-top[disabled="true"],
  210. .button-right-top[disabled="true"] {
  211.   background-image: url("chrome://global/skin/button/btn-dis-rit-top.gif");
  212. }
  213.  
  214. button:hover:active > .button-box-right > .button-right-mid[disabled="true"],
  215. .button-right-mid[disabled="true"] {
  216.   background-image: url("chrome://global/skin/button/btn-dis-rit-mid.gif");
  217. }
  218.  
  219. button:hover:active > .button-box-right > .button-right-btm[disabled="true"],
  220. .button-right-btm[disabled="true"] {
  221.   background-image: url("chrome://global/skin/button/btn-dis-rit-btm.gif");
  222. }
  223.   
  224.   /* .......... default normal state .......... */
  225.  
  226. button[default="true"] {
  227.   margin: 2px;
  228. }
  229.  
  230. .button-box-left[default="true"] {
  231.   width: 7px;
  232. }
  233.     
  234. .button-left-top[default="true"] {
  235.   background-image: url("chrome://global/skin/button/btn-def-lft-top.gif");
  236.   height: 9px;
  237. }
  238.  
  239. .button-left-mid[default="true"] {
  240.   background-image: url("chrome://global/skin/button/btn-def-lft-mid.gif");
  241. }
  242.  
  243. .button-left-btm[default="true"] {
  244.   background-image: url("chrome://global/skin/button/btn-def-lft-btm.gif");
  245.   height: 10px;
  246. }
  247.  
  248. .button-mid-top[default="true"] {
  249.   background-image: url("chrome://global/skin/button/btn-def-mid-top.gif");
  250.   height: 9px;
  251. }
  252.  
  253. .button-mid-btm[default="true"] {
  254.   background-image: url("chrome://global/skin/button/btn-def-mid-btm.gif");
  255.   height: 10px;
  256. }
  257.  
  258. .button-box-right[default="true"] {
  259.   width: 7px;
  260. }
  261.   
  262. .button-right-top[default="true"] {
  263.   background-image: url("chrome://global/skin/button/btn-def-rit-top.gif");
  264.   height: 9px;
  265. }
  266.  
  267. .button-right-mid[default="true"] {
  268.   background-image: url("chrome://global/skin/button/btn-def-rit-mid.gif");
  269. }
  270.  
  271. .button-right-btm[default="true"] {
  272.   background-image: url("chrome://global/skin/button/btn-def-rit-btm.gif");
  273.   height: 10px;
  274. }
  275.  
  276.   /* .......... default active state .......... */
  277.  
  278. :hover:active > .button-box-left > .button-left-top[default="true"] {
  279.   background-image: url("chrome://global/skin/button/btn-def-act-lft-top.gif");
  280. }
  281.  
  282. :hover:active > .button-box-left > .button-left-mid[default="true"] {
  283.   background-image: url("chrome://global/skin/button/btn-def-act-lft-mid.gif");
  284. }
  285.  
  286. :hover:active > .button-box-left > .button-left-btm[default="true"] {
  287.   background-image: url("chrome://global/skin/button/btn-def-act-lft-btm.gif");
  288. }
  289.  
  290. :hover:active > .button-stack > .button-box-mid > .button-mid-top[default="true"] {
  291.   background-image: url("chrome://global/skin/button/btn-def-act-mid-top.gif");
  292. }
  293.  
  294. :hover:active > .button-stack > .button-box-mid > .button-mid-btm[default="true"] {
  295.   background-image: url("chrome://global/skin/button/btn-def-act-mid-btm.gif");
  296. }
  297.  
  298. :hover:active > .button-box-right > .button-right-top[default="true"] {
  299.   background-image: url("chrome://global/skin/button/btn-def-act-rit-top.gif");
  300. }
  301.  
  302. :hover:active > .button-box-right > .button-right-mid[default="true"] {
  303.   background-image: url("chrome://global/skin/button/btn-def-act-rit-mid.gif");
  304. }
  305.  
  306. :hover:active > .button-box-right > .button-right-btm[default="true"] {
  307.   background-image: url("chrome://global/skin/button/btn-def-act-rit-btm.gif");
  308. }
  309.   
  310.   /* .......... default disabled state (the same as normal disabled) .......... */
  311.  
  312. button[default="true"][disabled="true"] {
  313.   margin-top: 3px;
  314.   margin-bottom: 3px;
  315. }
  316.  
  317. :hover:active > .button-box-left > .button-left-top[disabled="true"][default="true"],
  318. .button-left-top[disabled="true"][default="true"] {
  319.   background-image: url("chrome://global/skin/button/btn-dis-lft-top.gif");
  320.   height: 9px;
  321. }
  322.  
  323. .button-box-left[disabled="true"][default="true"] {
  324.   width: 6px;
  325. }
  326.  
  327. :hover:active > .button-box-left > .button-left-mid[disabled="true"][default="true"],
  328. .button-left-mid[disabled="true"][default="true"] {
  329.   background-image: url("chrome://global/skin/button/btn-dis-lft-mid.gif");
  330. }
  331.  
  332. :hover:active > .button-box-left > .button-left-btm[disabled="true"][default="true"],
  333. .button-left-btm[disabled="true"][default="true"] {
  334.   background-image: url("chrome://global/skin/button/btn-dis-lft-btm.gif");
  335.   height: 8px;
  336. }
  337.  
  338. :hover:active > .button-stack > .button-box-mid[disabled="true"][default="true"],
  339. .button-box-mid[disabled="true"][default="true"] {
  340.   background-color: #B7BFCB;
  341. }
  342.  
  343. :hover:active > .button-stack > .button-box-mid > .button-mid-top[disabled="true"][default="true"],
  344. .button-mid-top[disabled="true"][default="true"] {
  345.   background-image: url("chrome://global/skin/button/btn-dis-mid-top.gif");
  346.   height: 9px;
  347. }
  348.  
  349. :hover:active > .button-stack > .button-box-mid > .button-mid-btm[disabled="true"][default="true"],
  350. .button-mid-btm[disabled="true"][default="true"] {
  351.   background-image: url("chrome://global/skin/button/btn-dis-mid-btm.gif");
  352.   height: 8px;
  353. }
  354.  
  355. .button-box-right[disabled="true"][default="true"] {
  356.   width: 6px;
  357. }
  358.  
  359. :hover:active > .button-box-right > .button-right-top[disabled="true"][default="true"],
  360. .button-right-top[disabled="true"][default="true"] {
  361.   background-image: url("chrome://global/skin/button/btn-dis-rit-top.gif");
  362.   height: 9px;
  363. }
  364.  
  365. :hover:active > .button-box-right > .button-right-mid[disabled="true"][default="true"],
  366. .button-right-mid[disabled="true"][default="true"] {
  367.   background-image: url("chrome://global/skin/button/btn-dis-rit-mid.gif");
  368. }
  369.  
  370. :hover:active > .button-box-right > .button-right-btm[disabled="true"][default="true"],
  371. .button-right-btm[disabled="true"][default="true"] {
  372.   background-image: url("chrome://global/skin/button/btn-dis-rit-btm.gif");
  373.   height: 8px;
  374. }
  375.  
  376. /* ::::: plain buttons ::::: */
  377.  
  378. button.plain,
  379. button.plain:hover,
  380. button.plain:hover:active,
  381. button.plain:hover:active > .button-internal-box,
  382. button.plain > .button-internal-box,
  383. button.plain > .button-internal-box:hover:active,
  384. button.plain > .button-internal-box > .button-text-container,
  385. button.plain > .button-internal-box > .button-text-container:hover:active,
  386. button.plain > .button-internal-box > .button-text-container
  387.     > .button-text,
  388. button.plain > .button-internal-box > .button-text-container
  389.     > .button.text:hover:active,
  390. button.plain > .button-internal-box > .button-icon,
  391. button.plain > .button-internal-box > .button.icon:hover:active
  392. {
  393.   margin: 0px;
  394.   border: none !important;
  395.   padding: 0px;
  396. }
  397.  
  398. /* ::::: reorder buttons ::::: */
  399.  
  400. .reorder-up {
  401.   min-width: 0px;
  402.   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
  403. }
  404.  
  405. .reorder-down {
  406.   min-width: 0px;
  407.   list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
  408. }
  409.  
  410. .reorder-up > .button-internal-box > .button-icon,
  411. .reorder-down > .button-internal-box > .button-icon
  412. {
  413.   margin: 0px;
  414.   padding: 0px;
  415. }
  416.